<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form>
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form>
            <el-form-item label="结束日期：">
              <el-date-picker
                v-model="EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >

            <el-button size="mini" type="success" @click="handleAdd2"
              >新 增</el-button
            >
            <!-- <el-button size="mini" type="success" @click="exportExcel">导 出</el-button> -->
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <!-- <el-table-column prop="ID" label="序号" align="center"></el-table-column> -->
      <!-- <el-table-column
        prop="REMARK"
        label="详情描述"
        align="center"
        width="150"
      ></el-table-column> -->
      <!-- <el-table-column
        prop="ROADNAME"
        label="道路名称"
        align="center"
        width="150"
      ></el-table-column> -->
      <el-table-column
        prop="INSYSTEM"
        label="接入平台"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LEVEL"
        label="平台等级"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="AREANAME"
        label="区域名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ITEMNAME"
        label="项目名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="STATUS"
        label="状态"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="CHECKOBJECT"
        label="被考核对象"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="PROBLEM"
        label="问题描述"
        align="center"
        width="150"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="INTIME"
        label="接入时间"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 40px; height: 40px; margin-top: 12px"
            :src="scope.row.PHOTO"
            @click="bigImage(scope.row)"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i></div
          ></el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="STATUS"
        label="状态"
        align="center"
      ></el-table-column> -->
      <el-table-column label="播放" width="150">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.VEDIOURL"
            type="text"
            icon="el-icon-headset"
            @click="openRecording(scope.$index, scope.row)"
            >播放录音</el-button
          >
          <el-button
            v-if="scope.row.VideoPath"
            type="text"
            icon="el-icon-video-play"
            @click="playVideo(scope.$index, scope.row)"
            >播放视频</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope"
          ><el-button type="text" @click="handleAdd(scope.$index, scope.row)"
            >任务生成</el-button
          >
          <!-- <el-button type="text" @click="guidanceRecord(scope.$index, scope.row)"
            >指导记录</el-button
          >
          <el-button type="text" @click="rectificationRecord(scope.$index, scope.row)"
            >结果反馈</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="450px"
    >
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imageList" :key="item">
          <img :src="item" style="height: 100%; width: 100%" alt="图片丢失了" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <el-dialog
      title="视频展示"
      :visible.sync="showVideoDialogVisible"
      width="450px"
    >
      <video
        id="videoSource"
        style="width: 100%; height: 500px"
        :src="videoPath"
        controls="controls"
      >
        您的浏览器不支持 video 标签。
      </video>
      <!-- <video :ref="'videoPlayer' + index" :controls="isIn">
        <source :src="item.src" type="video/mp4" />
        您的浏览器不支持Video标签。
      </video>
      <i
        v-show="!isPlay"
        class="play-btn el-icon-video-play"
        @click="playVideo"
      ></i>
      <i
        v-show="isPlay && isIn"
        class="play-btn el-icon-video-pause"
        @click="pauseVideo"
      ></i> -->
    </el-dialog>

    <!-- 生成任务 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="5.729vw">
        <el-form-item label="考核单位：" label-width="110px">
          <el-select
            v-model="form.CLIENT_NO"
            placeholder="请选择"
            @change="getObjectList"
          >
            <el-option
              v-for="item in unitData"
              :key="item.CLIENT_NO"
              :label="item.UNITNAME"
              :value="item.CLIENT_NO"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核日期：" label-width="110px">
          <el-date-picker
            v-model="form.WORKDATE"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="考核类型：" label-width="110px">
          <el-select v-model="form.LX" placeholder="请选择" disabled>
            <el-option
              v-for="item in options"
              :key="item.LX"
              :label="item.LX"
              :value="item.LX"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核项目：" label-width="110px">
          <el-select
            v-model="form.XM"
            placeholder="请选择"
            @change="getObjectTypelList(), getStandardList()"
          >
            <el-option
              v-for="item in itemData"
              :key="item.ID"
              :label="item.ITEMNAME"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核对象类型：" label-width="110px">
          <el-select
            v-model="form.DLX"
            placeholder="请选择"
            @change="getLevelList(), getStandardList()"
          >
            <el-option
              v-for="item in objectTypeData"
              :key="item.ID"
              :label="item.OBJECTTYPE"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目等级：" label-width="110px">
          <el-select
            v-model="form.DJ"
            placeholder="请选择"
            @change="getObjectList()"
          >
            <el-option
              v-for="item in levelData"
              :key="item.ITEMLEVEL"
              :label="item.ITEMLEVEL"
              :value="item.ITEMLEVEL"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核标准：" label-width="110px">
          <el-select
            v-model="form.BZ"
            placeholder="请选择"
            @change="getObjectList()"
          >
            <el-option
              v-for="item in standardData"
              :key="item.BH"
              :label="item.TITLE"
              :value="item.BH"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核对象：" label-width="110px">
          <el-select
            v-model="form.DX"
            placeholder="请选择"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in objectData"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="addCommand()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 录入外部反馈问题 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit2"
      width="50%"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="7vw"
        class="flex"
      >
        <el-divider>必填</el-divider>
        <!-- <el-form-item label="问题描述：" class="wid50" prop="REPAIRMAN">
          <el-input
            v-model="form.PROBLEM"
            placeholder="请输入来源"
            class="handle-input mr10"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="反馈时间：" prop="REPAIRTIME">
          <el-date-picker
            v-model="form.REGISTERTIME"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="图片：" style="height: 12vw; width: 50%">
          <el-button size="mini" type="success" @click="openFolder"
            >选择图片</el-button
          >
          <input
            type="file"
            ref="PicFile"
            style="display: none"
            accept="image/*"
            @change="uploadPic"
          />
          <el-upload
            :file-list="formPhoto.imageList"
            ref="PicUpload"
            list-type="picture-card"
            :on-remove="
              (file, fileList) => {
                handleRemovePic(file, fileList, index)
              }
            "
            style="margin: 10px 0"
          >
            <i slot="default" class="el-icon-picture-outline"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频：" style="height: 12vw; width: 50%">
          <el-button size="mini" type="success" @click="openFolder"
            >选择视频</el-button
          >
          <input
            type="file"
            ref="PicFile"
            style="display: none"
            accept="image/*"
            @change="uploadPic"
          />
          <el-upload
            :file-list="formPhoto.imageList"
            ref="PicUpload"
            list-type="picture-card"
            :on-remove="
              (file, fileList) => {
                handleRemovePic(file, fileList, index)
              }
            "
            style="margin: 10px 0"
          >
            <i slot="default" class="el-icon-picture-outline"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="问题描述：" style="height: 6vw">
          <el-input
            type="textarea"
            :rows="5"
            v-model="form.PROBLEM"
            placeholder="请输入"
            class="handle-input mr10"
            style="width: 37.5vw; border: 1px solid #a4aca7"
          >
          </el-input>
        </el-form-item>

        <el-divider>选填</el-divider>

        <el-form-item label="考核单位：" class="wid50">
          <el-select
            v-model="form.CLIENT_NO"
            placeholder="请选择"
          >
            <el-option
              v-for="item in unitData"
              :key="item.CLIENT_NO"
              :label="item.UNITNAME"
              :value="item.CLIENT_NO"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核类型：" class="wid50">
          <el-select
            v-model="form.LX"
            disabled
            placeholder="请选择"
            @change="getObjectList()"
          >
            <el-option
              v-for="item in typeData"
              :key="item.ID"
              :label="item.TYPENAME"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="考核项目：" class="wid50">
          <el-select
            v-model="form.XM"
            placeholder="请选择"
            @change="getObjectTypelList(), getStandardList()"
          >
            <el-option
              v-for="item in itemData"
              :key="item.ID"
              :label="item.ITEMNAME"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核对象类型：" class="wid50">
          <el-select
            v-model="form.DLX"
            placeholder="请选择"
            @change="getLevelList(), getStandardList()"
          >
            <el-option
              v-for="item in objectTypeData"
              :key="item.ID"
              :label="item.OBJECTTYPE"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目等级：" class="wid50">
          <el-select
            v-model="form.DJ"
            placeholder="请选择"
            @change="getObjectList()"
          >
            <el-option
              v-for="item in levelData"
              :key="item.ITEMLEVEL"
              :label="item.ITEMLEVEL"
              :value="item.ITEMLEVEL"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核对象：" class="wid50">
          <el-select
            v-model="form.DX"
            placeholder="请选择"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in objectData"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit2 = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
import BenzAMRRecorder from 'benz-amr-recorder'
export default {
  data () {

    return {
      StartDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
      EndDate: formatDate(new Date(new Date().getTime() + 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      srcBig: '',
      imageList: [],
      playRec: null,
      videoPath: '',
      showBigDialogVisible: false,
      showVideoDialogVisible: false,
      showRecordVisible: false,
      showGuidanceVisible: false,
      isVisibleEdit: false,
      isVisibleEdit1: false,
      isVisibleEdit2: false,
      form: {
        groupingList: [],
        groupingValue: '',
        cphList: [],//车牌号列表
        guidance: '',
        alermTypeList: [{ label: '1分钟', value: '1' }, { label: '5分钟', value: '5' }, { label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }],
        alermTypeValue: '5',
        // StartDate: formatDate(new Date(new Date() - 3600 * 1000 * 24*30), 'yyyy-MM-dd'),
        // EndDate: formatDate(new Date(), 'yyyy-MM-dd 23:59:59'),
        name: "",
        PeopleNumber: '1',
        VehicleNumber: '0',
        team: "",
        car: "",
        LX: '被动接收',
      },
      formPhoto: {
        imageList: []
      },
      client: '',
      clientList: [],
      teamList: [],
      carteam: '',
      carteamList: [],
      carList: [],
      car: [],
      team: [],
      originalData: [],
      tableData: [],
      commandData: [],
      rectificationData: [],
      loading: false,
      URLByTYPE: '',
      startDate: '',
      typeData: [],
      standardData: [],
      unitData: [],
      itemData: [],
      objectData: [],
      objectTypeData: [],
      levelData: [],
      dxcar: [],
      dxteam: [],

    }
  },
  created () {
    this.getTeamList()
    this.getcarTeamList()
  },
  mounted () {
    this.getUnitList()
    this.getTypeList()
    this.getItemList()
    this.getlistdata()
  },
  methods: {

    // 获取考核单位列表
    async getUnitList () {
      var url = 'Assess/GetUnit_Assess?UNITNAME='
      let { data } = await this.$Http.get(url)
      this.unitData = data
    },
    // 获取考核类型列表
    async getTypeList () {
      var url = 'Assess/GetCheckType_Assess?TYPENAME='
      let { data } = await this.$Http.get(url)
      this.typeData = data
    },
    // 获取考核项目列表
    async getItemList () {
      var url = 'Assess/GetCheckItem_Assess?KEY='
      let { data } = await this.$Http.get(url)
      this.itemData = data
    },
    // 获取考核对象类型
    async getObjectTypelList () {
      var url = 'Assess/GetObjectType_Assess?ITEMID=' + this.form.XM + '&OBJECTTYPE='
      let { data } = await this.$Http.get(url)
      this.objectTypeData = data
    },
    // 获取考核项目等级列表
    async getLevelList () {
      var url = 'Assess/GetItemLevelList_Assess?CLIENT_NO=' + localStorage.getItem('CLIENT_NO') + '&ITEMID=' + this.form.XM + '&OBJECTTYPE=' + this.form.DLX
      let { data } = await this.$Http.get(url)
      this.levelData = data
    },
    // 获取考核标准列表
    async getStandardList () {
      var url = 'Assess/GetStandardDetail_Assess?ITEMID=' + this.form.XM + '&OBJECTTYPEID=' + this.form.DLX + '&KEY='
      let { data } = await this.$Http.get(url)
      this.standardData = data
    },
    // 获取考核对象列表
    async getObjectList () {
      var url = 'Assess/GetItemObjectList_Assess?CLIENT_NO=' + this.form.CLIENT_NO + '&ITEMID=' + this.form.XM + '&OBJECTTYPE=' + this.form.DLX + '&ITEMLEVEL=' + this.form.DJ
      //  + localStorage.getItem('CLIENT_NO') + '&StartTime=' + this.form.STARTDATE + '&EndTime=' + this.form.ENDDATE
      let { data } = await this.$Http.get(url)
      this.objectData = data
    },
    // 获取指导记录
    async getcommandData () {
      const { data } = await this.$Http.get('Worker/GetCommandList?ID=' + this.form.ID)
      this.originalData = data
      this.screeningData()
    },
    // 获取反馈记录
    async getrectificationData () {
      const { data } = await this.$Http.get('Worker/GetProblemList?ParentID=' + this.form.ID)
      this.rectificationData = data
    },
    // 指导记录查询
    screeningData () {
      this.currentPage = 1;
      this.commandData = this.originalData
      console.log(this.commandData)
      if (this.form.name) this.commandData = this.commandData.filter(item => item.NAME.includes(this.form.name))
    },

    // 录入外部反馈问题
    handleAdd2 () {
      this.addDialogTitle = '录入外部反馈问题'
      //清空编辑框
      this.form = {
        LX: '被动接收'
      }
      this.formPhoto = {
        imageList: []
      }
      //展示窗口
      this.isVisibleEdit2 = true;
      // this.idEdit = false;
    },
    async getlistdata () {
      this.currentPage = 1;
      var url = 'Assess/GetTaskOutSide_Assess?StartTime=' + this.StartDate + '&EndTime=' + this.EndDate + '&STATUS='
      const { data } = await this.$Http.get(url)
      // 原始数据
      this.tableData = data
      // this.tableData = [{"VID":"2","TYPE":"2","PARENT_ID":"0","TITLE":"丰年北里","REMARK":"小花园落叶多","AUDIO":"","VIDEO":"http://photo-srw-hb2.oss-cn-beijing.aliyuncs.com/20211103_102406.3gp","TIME":"2023/5/11 10:28:07","ID":"14","CLIENT_NO":null,"ORIENTATION_TIME":"2024/10/11 10:28:07","ROADNAME":"丰年北里","LOCATION":"中国天津市西青区华天道5号","DETAIL":"小花园落叶多","PHOTO1":"http://photo-srw-hb2.oss-cn-beijing.aliyuncs.com/fk-Android-1赵连成IMG_20211103_102733.jpg","PHOTO2":"http://photo-srw-hb2.oss-cn-beijing.aliyuncs.com/fk-Android-1兰浩IMG_20200103_111000.jpg","PHOTO3":"http://photo-srw-hb2.oss-cn-beijing.aliyuncs.com/fk-Android-1兰浩IMG_20200103_111000.jpg","PHOTO4":"","PHOTO5":"","PHOTO6":"","PHOTO7":"","PHOTO8":"","PHOTO9":"","Lng":null,"Lat":null,"RecordPath":"","VideoPath":"http://photo-srw-hb2.oss-cn-beijing.aliyuncs.com/20211103_102406.3gp","LONGITUDE":117.11179,"LATITUDE":39.094559,"DIRECTION":null}]

    },

    // 录入外部考核任务
    async saveAdd () {
      // var str = '';
      // this.form.DX.forEach(element => {
      //   str = str + element + ','
      // });
      // str = str.substring(0, str.length - 1);
      // this.form.DID = str
      this.$axios({
        url: 'Assess/SaveTaskOutSide_Assess',
        method: 'post',
        data: {
          ID: '0',
          REGISTERTIME: this.form.REGISTERTIME,
          PROBLEM: this.form.PROBLEM,
          PHOTO: '',
          VEDIOURL: '',
          INSYSTEM: '录入',
          LEVEL: '区级',
          LEVEL: '区级',
          CLIENT_NO: this.form.CLIENT_NO,
          CHECKITEM: '',
          CHECKOBJECTTYPE: '4',
          ITEMLEVEL: '',
          CHECKOBJECT: '',
        },

      }).then((res) => {
        if (res.data.IsSucess) {
          this.$message.success('外部任务录入成功');
          this.getlistdata()
          this.isVisibleEdit2 = false;
        } else {
          this.$message.error('外部任务录入成功');
        }
      })

    },
    // 生成考核任务
    async addCommand () {
      var str = '';
      this.form.DX.forEach(element => {
        str = str + element + ','
      });
      str = str.substring(0, str.length - 1);
      this.form.DID = str
      this.$axios({
        url: 'Assess/SaveTaskInfo_Assess',
        method: 'post',
        data: {
          ID: '0',
          WORKDATE: this.form.WORKDATE,
          CHECKTYPEID: '4',
          CHECKITEMID: this.form.XM,
          CHECKOBJECTTYPEID: this.form.DLX,
          ITEMLEVEL: this.form.DJ,
          CLIENT_NO: this.form.CLIENT_NO,
          RANDOMTYPE: '录入',
          LEVEL: this.form.DJ,
          STANDARDIDS: this.form.BZ,
          OBJECTIDS: this.form.DID,
          CREATENO: localStorage.getItem('CLIENT_NO'),
          INSYSTEMID: this.form.ID,
        },

      }).then((res) => {
        if (res.data.IsSucess) {
          this.$message.success('考核任务生成成功');
          this.getlistdata()
          this.isVisibleEdit = false;
        } else {
          this.$message.error('考核任务生成失败');
        }
      })

    },
    // 导出Excel
    // exportExcel () {
    //   let excelName = '移动状态信息表'
    //   const tHeader = ['车辆ID', '车辆名称', '车辆分组', '车辆类型', '移动状态', '移动时间', '开始移动时间', '最后移动时间']
    //   const filterVal = ['VID', 'LICENSE_PLATE', 'CAR_TYPE', 'CLIENT_NAME', 'IsRun', 'RunTime', 'BEGINDATE', 'ENDDATE']
    //   export2Excel(tHeader, filterVal, this.tableData, excelName)
    // },
    // 放大图片
    bigImage (row) {
      // this.srcBig = row.PHOTO1
      this.imageList = []
      if (row.PHOTO1 != '') {
        this.imageList.push(row.PHOTO1)
      }
      if (row.PHOTO2 != '') {
        this.imageList.push(row.PHOTO2)
      }
      if (row.PHOTO3 != '') {
        this.imageList.push(row.PHOTO3)
      }
      if (row.PHOTO4 != '') {
        this.imageList.push(row.PHOTO4)
      }
      if (row.PHOTO5 != '') {
        this.imageList.push(row.PHOTO5)
      }
      if (row.PHOTO6 != '') {
        this.imageList.push(row.PHOTO6)
      }
      if (row.PHOTO7 != '') {
        this.imageList.push(row.PHOTO7)
      }
      if (row.PHOTO8 != '') {
        this.imageList.push(row.PHOTO8)
      }
      if (row.PHOTO9 != '') {
        this.imageList.push(row.PHOTO9)
      }
      this.showBigDialogVisible = true
    },
    playRecord (index, row) {
      var recordPath = row.RecordPath
      var player = $('<amr src="' + recordPath + '"  crossOrigin="anonymous"></amr>')
      player = new amrEvent($(player));
      player && player.play(function (playing) {
        console.log("current player playing ?? " + playing)
      })
    },
    //播放语音
    openRecording (index, row) {
      let url = row.RecordPath
      // let url = _url.split('.com')[1]
      let vm = this
      if (vm.playRec !== null) {
        vm.stopPlayVoice()
      }
      vm.playRec = new BenzAMRRecorder()
      //⚠️注意跨域问题
      vm.playRec.initWithUrl('/record' + url).then(function () {
        vm.voiceActive = index
        vm.playRec.play()
        vm.playRec.onEnded(function () {
          vm.voiceActive = null
        })
      }).catch((e) => {
        console.log(e)
        vm.$message.error('播放录音失败')
      })
    },
    //停止播放
    stopPlayVoice () {
      if (this.playRec.isPlaying()) {
        this.playRec.stop()
      }
    },
    playVideo (index, row) {
      if (row.VideoPath != '' && row.VideoPath != null) {
        this.videoPath = row.VideoPath
        this.showVideoDialogVisible = true;
      } else {
        this.$message.error('未上传视频')
      }

    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },

    // 打开反馈记录
    rectificationRecord (index, row) {
      this.form = Object.assign({}, this.form, row);
      this.showRecordVisible = true
      this.getrectificationData()
    },
    // 打开指导记录
    guidanceRecord (index, row) {
      this.form = Object.assign({}, this.form, row);
      this.showGuidanceVisible = true
      this.getcommandData()
    },
    // 打开添加指导窗口
    handleAdd (index, row) {
      this.form = Object.assign({}, row);
      this.form.LX = '被动接收',
        this.addDialogTitle = '任务生成'
      //展示窗口
      this.isVisibleEdit = true;
    },
    // 打开添加指导窗口
    handleAdd1 (index, row) {
      this.form = Object.assign({}, row);
      this.dxcar = Object.assign([]);
      this.dxteam = Object.assign([]);
      this.addDialogTitle = '资源调度与过程指导'
      //展示窗口
      this.isVisibleEdit1 = true;
      // this.idEdit = false;
    },
    // 下发指导
    async addCommand1 () {
      this.$message.success('下发指导成功')
      this.isVisibleEdit = false
    },
    // 选择某一个下拉框
    selectCar () {
      // this.dxlist.dxteam =  this.form.team
      // this.dxlist.dxcar =  this.form.car
      this.dxteam = this.form.team
      this.dxcar = this.form.car
    },

    handleClose () {
      this.showBigDialogVisible = false;
    },
    // 限制用户上传的图片格式和大小
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 点击上传维修单图片按钮
    clickBYFJPic () {
      this.$refs.BYFJPicFile.click();
    },
    changeBYFJPic () {
      this.afterRead(this.$refs.BYFJPicFile.files[0]);
      this.$refs.BYFJPicFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
    },
    afterRead (file) {
      return new Promise((resolve, reject) => {
        // 此时可以自行将文件上传至服务器
        const that = this
        let client = new OSS(this.dataObj)
        const fileName = file.name
        //定义唯一的文件名，打印出来的uid其实就是时间戳
        //client 是第一步中的 client
        client
          .multipartUpload(fileName, file)
          .then((result) => {
            //下面是如果对返回结果再进行处理，根据项目需要
            // console.log(result)
            that.BYFJPicUrl =
              'http://' +
              result.bucket +
              '.' +
              that.baseAli +
              '/' +
              result.name
            console.log(that.tempUrl)
            resolve()
          })
          .catch((err) => {
            console.log('err:', err)
            reject()
          })
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },

    openFolder () {
      if (this.formPhoto.imageList.length > 2) {
        this.$message.warning(`最多上传三张图片`);
      } else {
        this.$refs.PicFile.click();
      }
    },
    uploadPic () {
      this.readPic(this.$refs.PicFile.files[0]);
      this.$refs.PicFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
    },
    readPic (file) {
      return new Promise((resolve, reject) => {
        // 此时可以自行将文件上传至服务器
        const that = this
        let client = new OSS(this.dataObj)
        const fileName = file.name
        //定义唯一的文件名，打印出来的uid其实就是时间戳
        //client 是第一步中的 client
        client
          .multipartUpload(fileName, file)
          .then((result) => {
            //下面是如果对返回结果再进行处理，根据项目需要
            // console.log(result)
            var url =
              'https://' +
              result.bucket +
              '.' +
              that.baseAli +
              '/' +
              result.name
            console.log(url)
            that.completeUploadPic(result.name, url)
            resolve()
          })
          .catch((err) => {
            console.log('err:', err)
            reject()
          })
      })
    },
    completeUploadPic (name, url) {
      this.formPhoto.imageList.push({ name: name, url: url })
    },
    // 删除图片
    handleRemovePic (file, fileList, index) {
      // console.log('删前')
      // console.log(this.formPhoto.imageList)
      this.formPhoto.imageList.splice(this.formPhoto.imageList.indexOf(file), 1);
      // console.log('删后')
      // console.log(this.formPhoto.imageList)
    },
    // 放大图片
    handlePreviewPic (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 关闭图片编辑窗口
    handleClosePic () {
      this.$refs.PicUpload.clearFiles()
    },
    // 关闭图片预览窗口
    handleClosePicPreview () {
      this.$nextTick(() => {
        let domImageMask = document.querySelector(".el-image-viewer__mask");
        if (domImageMask) {
          domImageMask.addEventListener("click", () => {
            document.querySelector(".el-image-viewer__close").click();
          })
        }
      })
    },
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>